<template>
  <div>
    <!-- 基本信息 -->
    <div class="base">
      <el-card class="base_one" shadow="never">
        <el-button :disabled="disabled" type="success" icon="el-icon-s-opportunity" @click="$emit('getInfo')"
                   style="background:#67C23A">设备信息
        </el-button>
        <el-button :disabled="disabled" type="primary" icon="el-icon-picture" @click="previewImg(0)"
                   style="background:#1990FE">现场照片
        </el-button>
        <el-button :disabled="disabled" type="primary" icon="el-icon-video-camera-solid" @click="$emit('getVideo',videoList)"
                   style="background:#1990FE">现场视频
        </el-button>
      </el-card>

      <!-- 图片遍历 -->
      <div style="display: flex" v-if="type!=='综合绘图'">
        <!--        <el-card-->
        <!--          shadow="hover"-->
        <!--          class="base_img"-->
        <!--          :body-style="{ padding: '0px' }"-->
        <!--          v-for="(item, index) in imgList"-->
        <!--          :key="item.url">-->
        <!--          <el-image class="base_img-item" @click="previewImg(index)" :src="item.url" fit="cover"></el-image>-->
        <!--          <div class="base_img-name">-->
        <!--            {{item.name}}-->
        <!--          </div>-->
        <!--          <div class="base_img-time flex-between">-->
        <!--            <em>{{item.time | formatTimer}}</em>-->
        <!--          </div>-->
        <!--        </el-card>-->

        <!--        <el-card-->
        <!--          style="text-align: center"-->
        <!--          shadow="hover"-->
        <!--          class="base_img"-->
        <!--          :body-style="{ padding: '0px' }"-->
        <!--          v-for="item in videoList"-->
        <!--          :key="item.url">-->
        <!--          <video :id="item.url" class="base_img-item" controls @fullscreenchange="fullscreenchange(item.url)">-->
        <!--            <source :src="item.url" type="video/mp4">-->
        <!--          </video>-->
        <!--          <el-button circle type="primary" icon="el-icon-video-play" @click="handlePlay(item.url)"></el-button>-->
        <!--          <div class="base_img-name">-->
        <!--            {{item.name}}-->
        <!--          </div>-->
        <!--          <div class="base_img-time flex-between">-->
        <!--            <em>{{item.time | formatTimer}}</em>-->
        <!--          </div>-->
        <!--        </el-card>-->
      </div>

    </div>
    <!-- 查看大图 -->
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>

<script>
  import {store} from '../../work-point.store'
  import Format from '@/utils/format'
  import constUrl from '@/services/env'
  import PictureViewer from '@/components/picture-viewer/index-name'

  export default {
    props: ['info', 'disabled'],
    components: {PictureViewer},
    data() {
      return {
        equipId: '',
        type: '',
        leftInfoList: [],
        infoData: {},
        rightInfoList: [],
        imgList: [],
        videoList: [],
      }
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer), 'yyyy-MM-dd')
        }
        return ''
      },
    },
    computed: {},
    created() {
    },
    methods: {
      //判断是不是全屏
      checkFullScreen() {
        var isFull = document.webkitIsFullScreen || document.mozFullScreen ||
          document.msFullscreenElement || document.fullscreenElement
        if (isFull == null || isFull == undefined) {
          isFull = false
        }
        return isFull
      },
      //退出全屏时停止
      fullscreenchange(id) {
        var video = document.getElementById(id);
        //全屏就播放
        if (this.checkFullScreen()) {
          video.play();
        } else {
          //缩小就暂停
          video.pause();
        }
      },
      handlePlay(id) {
        var video = document.getElementById(id);
        video.requestFullscreen();
      },
      infoHandel(picList,workPointId) {
        let monitorPicList = picList || []
        let monitorVideoList = []
        const info = store.workPointList.find((x) => x.id === workPointId) || {};
        this.imgList = info.picList?.map(x => ({...x, url: constUrl + x.url})) || []
        monitorPicList.map(x => {
          this.imgList.push({...x, url: constUrl + x.url})
        })
        this.videoList = info.videoList?.map(x => ({...x, url: constUrl + x.url})) || []
        monitorVideoList.map(x => {
          this.videoList.push({...x, url: constUrl + x.url})
        })
        let showSlopeInfo = true
        if (!info.slopeInfo || !info.slopeInfo.slopeNo) {
          info.slopeInfo = {}
          showSlopeInfo = false
        }
        let leftInfoList = [
          {title: "名称", value: info.name || "-", show: true},
          {title: "边坡编号", value: info.slopeInfo.slopeNo || "-", show: showSlopeInfo,},
          {title: "行政区", value: info.area || "-", show: true},
          {
            title: '起止时间',
            value: (info.startTime ? Format(new Date(info.startTime), 'yyyy年MM月dd日') : '') + '~' + (info.endTime ? Format(new Date(info.endTime), 'yyyy年MM月dd日') : ''),
            show: true
          },
          {
            title: "起止桩号",
            value: info.slopeInfo.startStoke + "~" + info.slopeInfo.endStoke || "-",
            show: showSlopeInfo,
          },
          {title: "经纬度", value: info.longitude + "，" + info.latitude || "-", show: info.longitude},
        ]
        let rightInfoList = [
          {title: "边坡高度", value: info.slopeInfo.height + 'm' || "-", show: showSlopeInfo,},
          {title: "边坡长度", value: info.slopeInfo.slopeLength + 'm' || "-", show: showSlopeInfo,},
          {title: "边坡位置", value: info.slopeInfo.positionName || "-", show: showSlopeInfo,},
          {title: "边坡类型", value: info.slopeInfo.slopeTypeName || "-", show: showSlopeInfo,},
          {title: "道路类型", value: info.slopeInfo.slopeSlideTypeName || "-", show: showSlopeInfo,},
        ]
        this.leftInfoList = leftInfoList
        this.rightInfoList = rightInfoList
      },
      // 查看大图
      previewImg(index) {
        const urlList = JSON.parse(JSON.stringify(this.imgList))
        if (urlList.length < 1) {
          this.$message.info('没有上传现场照片');
          return
        }
        this.$refs.imageViewer.showViewer(urlList, index)
      },
    }
  }
</script>

<style lang="less" scoped>
  .base {
    display: flex;
    overflow-x: auto;
    padding-bottom: 6px;
    float: right;
    padding-top: 10px;


    & > * {
      flex-shrink: 0;
    }

    .base_one {
      margin-right: 20px;

      /deep/ .el-card__body {
        display: flex;
        padding: 2px 10px;
      }

      &:last-child {
        margin-right: 20px;
      }
    }

    .infoList {
      max-width: 400px;

      li {
        display: flex;
        line-height: 18px;
        font-size: 16px;
        margin-bottom: 8px;

        .title {
          width: 70px;
          text-align: right;
          color: #1990FE;
          flex-shrink: 0;
          font-size: 13px;

          &::after {
            content: '：';
          }
        }

        .content {
          font-size: 13px;
          color: #515563;
        }
      }
    }

    .base_img {
      position: relative;

      .el-button--text {
        color: black;
      }

      .el-button--primary {
        width: 155px;
        color: #ffffff9e;
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 120px;
        background: transparent;
      }

      margin-right: 20px;
      width: 155px;
      box-shadow: 0 2px 6px 0 rgb(40 51 64);

      .base_img-item {
        width: 155px;
        height: 155px;
        cursor: pointer;
      }

      .base_img-name {
        text-align: center;
        padding: 10px 6px;
      }

      .base_img-time {
        font-size: 12px;
        padding: 0 6px 6px;
        color: #999;
      }


      /* 隐藏video 所有控件 */

      video::-webkit-media-controls-play-button {
        display: none;
      }
    }
  }

</style>

